/*
 * @Author: zhangyujie
 * @Date:   2015-08-12 10:45:31
 * @Last Modified by:   zhangyujie
 * @Last Modified time: 2015-08-13 14:09:05
 */


define(['jquery', 'd3', 'util','hammer'], function($, d3,uitl,Hammer) {

	function crossBar(data) {


		//圆的点击回调
		function circleClick(that) {
			var year = $(".five_year").html()
			var month = $(that).attr("class").charAt(6)

		}
		//var d = new Date()
		//var year = d.getFullYear()
		//
		//$(".five_year").html(year)
        //
		//$(".five_pref").click(function() {
		//	year = year - 1
		//	$(".five_year").html(year)
		//	changeYear(year)
		//})
        //
		//$(".five_next").click(function() {
		//	year = year + 1
		//	$(".five_year").html(year)
		//	changeYear(year)
		//})
        //
		//function changeYear(year) {
		//	five(setting)
		//}

		var setting = {
			selector: '#five',
			series:data,
			//series: [{
			//	'name': '11月',
			//	'value': 35
			//}, {
			//	'name': '12月',
			//	'value': 26
			//}, {
			//	'name': '3月',
			//	'value': 13
			//}, {
			//	'name': '4月',
			//	'value': 18
			//}, {
			//	'name': '5月',
			//	'value': 49
			//}, {
			//	'name': '6月',
			//	'value': 20
			//}, {
			//	'name': '7月',
			//	'value': 21
			//}, {
			//	'name': '8月',
			//	'value': 33
			//}, {
			//	'name': '9月',
			//	'value': 41
			//}],
			colorset: ['#AED0F0', '#E3E3E3', '#BDBDBD'],
			margin: {
				top: 10,
				right: 10,
				left: 20,
				bottom: 10
			},
			textStyle: {
				fontSize: '12px',
				fontWeight: '600'
			},
			circleStyle: {
				fill: '#fff',
				stroke: '#BDBDBD',
				strokeWidth: '1px'
			},
			backStyle: {
				fill: '#E3E3E3',
				stroke: '#BDBDBD',
				strokeWidth: '1px'
			},
			rectStyle: {
				fill: '#AED0F0',
				stroke: '#BDBDBD',
				strokeWidth: '1px'
			}

		}

		five(setting)

		function five(setting) {
			document.querySelector(setting.selector).innerHTML = ''
			var selector = setting.selector,
				series = setting.series,
				colorset = setting.colorset,
				textStyle = setting.textStyle,
				circleStyle = setting.circleStyle,
				rectStyle = setting.rectStyle,
				backStyle = setting.backStyle,
				width = document.querySelector(selector).offsetWidth,
				height = document.querySelector(selector).offsetHeight,
				margin = setting.margin,
				tickValues = []


			var svg = d3.select(selector)
				.append('svg')
				.attr('width', width)
				.attr('height', height)

			var xScale = d3.scale.linear()
				.domain([0, d3.max(series, function(d) {

					return (d['value'] + 30)
				})])
				.range([0, width - margin.top - margin.bottom])

			for (var i = 0; i < series.length; i++) {

				var value = parseInt(series[i]['name'].substring(0, 2),10);

				tickValues.push(value)
			}

			var yScale = d3.scale.ordinal()
				.domain(tickValues)
				.rangeBands([0, height - margin.left - margin.right], 0.6)

			var yAxis = d3.svg.axis()
				.scale(yScale)
				.tickValues(tickValues)
				.orient('left')
				.tickSize(6, 0)

			svg.append('g')
				.attr('class', 'yAxis')
				.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
				.call(yAxis)

			svg.select('.yAxis').selectAll('path')
				.attr('fill', 'none')
				.attr('stroke', '#CCD4D4')
				.attr('stroke-width', 1)

			svg.select('.yAxis').selectAll('text')
				.style('font-size', textStyle.fontSize)
				.style('font-weight', textStyle.fontWeight)

			var back = svg.append('g')
				.attr('class', 'mback')

			var con = svg.append('g')
				.attr('class', 'mcon')

			var circle = svg.append('g')
				.attr('class', 'mcircle')

			back.selectAll('rect')
				.data(series)
				.enter()
				.append('rect')
				.attr('x', margin.left)
				.attr('y', function(d, i) {



					return yScale(parseInt(d['name'].substring(0, 2),10)) + margin.top
				})
				.attr('height', yScale.rangeBand() / 2)
				.attr('fill', backStyle.fill)
				.attr('width', width - margin.left - margin.right)
				.attr('cursor', 'pointer')

			con.selectAll('rect')
				.data(series)
				.enter()
				.append('rect')
				.attr('x', margin.left)
				.attr('y', function(d, i) {
					return yScale(parseInt(d['name'].substring(0, 2),10)) + margin.top
				})
				.attr('height', yScale.rangeBand() / 2)
				.attr('width', 0)
				.attr('fill', rectStyle.fill)
				.transition()
				.duration(1500)
				.attr('width', function(d, i) {

					return xScale(d['value'])
				})
				.attr('cursor', 'pointer')

			circle.selectAll('circle')
				.data(series)
				.enter()
				.append('circle')
				.attr('cx', function(d, i) {

					return xScale(d['value']) + margin.left
				})
				.attr('cy', function(d, i) {

					return yScale(parseInt(d['name'].substring(0, 2),10)) + margin.bottom + 3
				})
				.attr('r', 10)
				.attr('fill', circleStyle.fill)
				.attr("stroke", colorset[2])
				.attr("class", function(d, i) {
					return "circle" + (i + 1)
				})
				.on("click", function() {
					circleClick(this)
				})

			circle.selectAll('text')
				.data(series)
				.enter()
				.append('text')
				.attr('x', function(d, i) {

					return xScale(d['value']) + margin.left
				})
				.attr('y', function(d, i) {

					return yScale(parseInt(d['name'].substring(0, 2),10)) + margin.bottom + yScale.rangeBand() / 4
				})
				.text(function(d) {

					return d['value']
				})
				.style('font-size', textStyle.fontSize)
				.style('font-weight', textStyle.fontWeight)
				.attr('text-anchor', 'middle')
				.attr('dy', '0.35em')
				.attr("class", function(d, i) {
					return "circle" + (i + 1)
				})
				.on("click", function() {
					circleClick(this)
				})


		}


	}

	return {
		crossBar: crossBar
	}


})